<template>
  <div>
    <h3 class="title">本月数据同步情况一览</h3>
    <!-- //时间 -->
 <el-row type="flex" justify="center" align="middle">
  <el-col :span="16">
    <div class="grid-content bg-purple-light">
      <div class="block">
    <span class="demonstration">时间起</span>
    <el-date-picker

      v-model="value1"
      type="date"
      placeholder="选择日期"
      align="right"
      >
    </el-date-picker>
    <span class="demonstration">时间止</span>
    <el-date-picker
      v-model="value2"
      type="date"
      placeholder="选择日期"
      align="right"
      >
    </el-date-picker>
    <el-button type="primary">查询</el-button>
  </div>
    </div>
  </el-col>
</el-row>
<!-- //详情1 -->
 <el-row type="flex" justify="center" align="middle">
  <el-col :span="20">
    <div class="grid-content bg-purple-light">
      <!-- 图片 -->
      <div class="demo-image">
      <div class="block" v-for="fit in fits" :key="fit">
    <span class="demonstration"></span>
    <el-image
      style="width: 50px; height: 50px"
      :src="url"
      :fit="fit"></el-image>
  </div>
      <div><h4>交易中心数据同步情况</h4>
      <p>这是一段比较长的简介</p></div>
      </div>
      <div class="middledata">
        <div><p>土地</p>
        <p>32</p>
        <p>22</p>
        </div>
        <messi></messi>
      </div>
      <div class="middledata">
        <div><p>房贷数据</p>
        <p>32</p>
        <p>22</p>
        </div>
      <messi></messi>
      </div>
      <div class="middledata">
        <div><p>产权</p>
        <p>10</p>
        <p>8</p>
        </div>
        <echarts></echarts>
      </div>
      <div class="middledata">
        <div><p>房贷数据</p>
        <p>15</p>
        <p>12</p>
        </div>
        <echarts></echarts>
      </div>
      <div class="middledata">
        <div><p>矿权</p>
        <p>5</p>
        <p>5</p>
        </div>
        <echarts></echarts>
      </div>

      <div>
        <el-button>详细</el-button>
      </div>
    </div>

  </el-col>
</el-row>
<!-- //详情2 -->
 <el-row type="flex" justify="center" align="middle">
  <el-col :span="20">
    <div class="grid-content bg-purple-light">
      <!-- 图片 -->
      <div class="demo-image">
      <div class="block" v-for="fit in fits" :key="fit">
    <span class="demonstration"></span>
    <el-image
      style="width: 50px; height: 50px"
      :src="url"
      :fit="fit"></el-image>
  </div>
      <div><h4>市往建局数据同步情况</h4>
      <p>这是一段比较长的简介</p></div>
      </div>
      <div class="middledata">
        <div><p>网签备案</p>
        <p>80</p>
        <p>78</p>
        </div>
        <messi></messi>
      </div>
      <div class="middledata">
        <div><p>预售许可证</p>
        <p>40</p>
        <p>40</p>
        </div>
       <echarts></echarts>
      </div>
      <div class="middledata">
        <div><p>交付预售</p>
        <p>75</p>
        <p>75</p>
        </div>
        <echarts></echarts>
      </div>

      <div>
        <el-button>详细</el-button>
      </div>
    </div>

  </el-col>
</el-row>
<!-- 详情3 -->
 <el-row type="flex" justify="center" align="middle">
  <el-col :span="20">
    <div class="grid-content bg-purple-light">
      <!-- 图片 -->
      <div class="demo-image">
      <div class="block" v-for="fit in fits" :key="fit">
    <span class="demonstration"></span>
    <el-image
      style="width: 50px; height: 50px"
      :src="url"
      :fit="fit"></el-image>
  </div>
      <div><h4>银行放贷数据同步情况</h4>
      <p>这是一段比较长的简介</p></div>
      </div>
      <div class="middledata">
        <div><p>房贷数据</p>
        <p>300</p>
        <p>300</p>
        </div>
        <messi></messi>
      </div>

      <div>
        <el-button>详细</el-button>
      </div>
    </div>

  </el-col>
</el-row>
  </div>
</template>
<script>
import Echarts from './components/echarts.vue'
import messi from './components/messi.vue'

export default {
  components: { messi, Echarts },

  data () {
    return {
      value1: '',
      value2: '',
      fits: ['fill'],
      url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'

    }
  }
}
</script>
<style lang="less" scoped>
    .middledata {
      display: flex;
      align-items: center;
    }
   h4{
        margin-top:0;
        margin-bottom:0;
    }
    p{
        margin-top:0;
        margin-bottom:0;

    }
  .demo-image{
    display: flex;
    align-items: center;

  }
  /deep/ .el-date-editor {
  position: relative;
  .el-input__prefix {
    // display: none;
    right: -180px;
    left: 0;
  }
}
  .el-button{
    margin-left: 50px;
  }
  .demonstration{
    margin-right: 10px;
    margin-left: 15px;
  }
  .title{
    text-align: center;
    color: blue;
  }
  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;

  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 4px;
    min-height: 36px;
    padding: 10px 15px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>
